<script setup>
import CommonHead from "@/layout/CommonHead.vue"
import CommonAside from "@/layout/CommonAside.vue"
import request from "@/net/request.js";
import {onMounted, reactive, ref,} from "vue";
import { options } from "@/components/Store/options.js";
import {ElNotification } from 'element-plus';
import {Delete,Search,Plus,Edit,Refresh} from '@element-plus/icons-vue'
const state = reactive({
    tableData: [],
    form: {
        storeId: '',
        storeName: '',
        storeTon: 0,
        storeCount: 0,
        storeCompany: '',
        storeRate: '',
        storeFree: '',
        createName:''
    },
    delorget: {
        storeId: '',
    }
})

const reset = () => {
        state.form.storeId = ''
        state.form.storeName = ''
        state.form.storeCompany = ''
        state.form.storeRate = ''
        state.form.storeFree = ''
        state.form.createName = ''

}
        
    

onMounted(() => {

      StoreFind()

    })
    const tmp = []
    const StoreFind = () => {
        request.get("/Store/find").then(res => {
            state.tableData = res.data
        })        

    }
    const StoreDel = () => {
        request.post("/Store/delete",state.delorget).then(res => {
            if (res.status === '200') {
              ElNotification({
                type: 'success',
                message: res.msg
              })
              StoreFind()
            }
            else ElNotification({
              type: 'error',
              message: res.msg
            })
        })
    }

    const StoreAdd = () => {
      if(state.form.storeId != ''){
        request.post("/Store/add",state.form).then(res => {
        if (res.status === '200'){
          ElNotification({
              type: 'success',
              message: res.msg
          })
          StoreFind()
        }
        else ElNotification({
              type: 'error',
              message: res.msg
            })
      })
      }
      else{
        ElNotification({
          type: 'error',
          message: '添加失败，ID不能为空'
        })
      }
      
    }

    const StoreModify = () => {
      request.post("/Store/modify",state.form).then(res => {
        if(res.status === '200'){
          ElNotification({
            type: 'success',
            message: res.msg
          })
          StoreFind()
        }
        else{
          ElNotification({
            type: 'error',
            message: res.msg
          })
        }
      })
    }

    const StoreGet = () => {
      if (state.delorget.storeId === '') {
        StoreFind()
      }
      else{
        request.post("/Store/get",state.delorget).then(res => {
        if(res.status === '200'){
          ElNotification({
            type: 'success',
            message: res.msg
          })
          state.tableData = res.data
        }else{
          ElNotification({
            type: 'error',
            message: res.msg
          })
        }
      })
      }
      
    }


</script>



<template>
    <el-container style="height: 100%">
      <el-aside width="auto">
        <CommonAside/>
      </el-aside>
      <el-container>
        <el-header>
          <CommonHead/>
        </el-header>
        <el-main>
          <el-card shadow="never">
            <el-row :gutter="20">
              <el-col :span="2">
                <el-input placeholder="仓库ID" v-model="state.form.storeId" clearable></el-input>
              </el-col>
              <el-col :span="3">
                <el-input placeholder="仓库名称" v-model="state.form.storeName" clearable></el-input>
              </el-col>
              <el-col :span="2">
                <el-input placeholder="货代公司ID" v-model="state.form.storeCompany" clearable></el-input>
              </el-col>
              <el-col :span="2">
                <el-input placeholder="费率" v-model.trim="state.form.storeRate" clearable></el-input>
              </el-col>
              <el-col :span="2">
                <el-input placeholder="免费天数" v-model.trim="state.form.storeFree" clearable></el-input>
              </el-col>
              <el-col :span="3">
                <el-input placeholder="创建人" v-model.trim="state.form.createName" clearable></el-input>
              </el-col>
              <el-button type="success" :icon = "Plus" round @click="StoreAdd">Add</el-button>
              <el-button type="primary" :icon = "Edit" round @click="StoreModify">Modify</el-button>
              <el-button type="warning" :icon = "Refresh" round @click="reset">Reset</el-button>
  
            </el-row>
          </el-card>
          <el-row :gutter="20" class="el_row">
            <el-col :span="6">
              <el-input placeholder="请输入要删除或查找的仓库ID" v-model="state.delorget.storeId" clearable></el-input>
            </el-col>
            <el-button type="danger" :icon="Delete" @click="StoreDel" >Delete</el-button>
            <el-button type="primary" :icon="Search" @click="StoreGet">Search</el-button>
          </el-row>
          <el-table :data="state.tableData" stripe style="width: 100%">
            <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in options" :key="index"/>
            
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </template>